<template>
	<view class="container">
		<top-back-navbar position="fixed" title="个人资料" background="#001b4d" color="#ffff"></top-back-navbar>

		<view class="content">
			<view class="content_box">
				<view class="u-f-ac input_item">
					<view class="titles">姓名</view>
					<view class="inputs">
						<u-input placeholder="请输入姓名" v-model="name" style="height: 100%;width:100%"></u-input>
					</view>
				</view>
				<view class="u-f-ac input_item">
					<view class="titles">身份证号</view>
					<view class="inputs">
						<u-input placeholder="请输入身份证号" v-model="idcard" style="height: 100%;width:100%"></u-input>
					</view>
				</view>
			</view>
			<view class="idcard_box" @click="uploadAuthImg('front_card')">
				<view style="text-align: center;">身份证正面照</view>
				<view class="u-f u-f-jsb">
					<image :src="front_card" v-if="front_card" class="image_box"></image>
					<view class="image_box" v-else></view>
				</view>
			</view>
			<view class="idcard_box" @click="uploadAuthImg('back_card')">
				<view style="text-align: center;">身份证反面照</view>
				<view class="u-f u-f-jsb">
					<image :src="back_card" v-if="back_card" class="image_box"></image>
					<view class="image_box" v-else></view>
				</view>
			</view>
			<view style="padding: 80rpx 30rpx;" class="u-f-ajc">
				<button type="primary" style="background-color: #32539b; width:100%;border-radius: 60rpx;"
					@click="submit" :loading="loading">确认提交</button>
			</view>
		</view>

		<tabbars :current="3"></tabbars>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				idcard: '',
				name: '',
				loading: false,
				openid: '',

				front_card: '',
				back_card: '',
			};
		},
		onLoad: function() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
				},
				fail: () => {
					uni.navigateTo({
						url: '../../login/login'
					});
				}
			});
		},
		methods: {
			uploadAuthImg(names) {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						uni.showLoading({
							title: '上传中...'
						})
						const filePath = res.tempFilePaths[0]
						uni.uploadFile({
							url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
							//仅为示例，非真实的接口地址
							filePath,
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								const data = typeof uploadFileRes.data === 'string' ? JSON.parse(
										uploadFileRes.data) :
									uploadFileRes.data
								// that.form.voucher = data.url.replace('localhost:7000', 'api.base.ruixingzhubao.xjkuang.com')
								that[names] = data.url
							},
							fail: () => {

							},
							complete: () => {
								uni.hideLoading()
							}
						})
					}
				})
			},
			nameInput(e) {
				this.name = e.target.value
			},
			idcardInput(e) {
				this.idcard = e.target.value
			},
			submit() {
				if (this.name == "") {
					uni.showToast({
						title: '请输入姓名',
						icon: "none"
					});
				} else if (this.idcard == "") {
					uni.showToast({
						title: '请输入身份证号',
						icon: "none"
					});
				} else {
					uni.request({
						url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.real_name_verfy&app=1',
						method: 'POST',
						data: {
							realname: this.name,
							idcard: this.idcard,
							openid: this.openid
						},
						header: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: res => {
							console.log(res)
							uni.showToast({
								title: res.data.message,
								icon: "none"
							});
						},
						fail: () => {},
						complete: () => {}
					});
				}
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f5fa;
	}

	.container {
		width: 100%;
		height: 100vh;
		;
		box-sizing: border-box;
	}

	.content {
		padding:20rpx 30rpx;
	}

	.content_box {
		padding:0 30rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		box-shadow: 1px 1px 5px -3px #000;
		.input_item {
			display: flex;
			align-items: center;
			.titles{
				width: 30%;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 28rpx;
			}
			.inputs{
				width: 70%;
				.u-input__input{
					height: 100%;
				}
			}
		}

	}

	.idcard_box {
		margin-top: 40rpx;
		view {
			font-size: 28rpx;
		}
		.u-f-jsb{
			display: flex;
			justify-content: center;
		}
	}

	.image_box {
		width: 500rpx;
		height: 300rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		margin-top:20rpx;
		box-shadow: 1px 1px 5px -3px #000;
	}
</style>
